<template>
    <div class="addBook">
        <el-form :model="bookForm"  ref="ruleForm" label-width="120px">
            <el-form-item label="书名" prop="region">
                <el-col :span="20">
                    <el-input v-model="bookForm.bookname" placeholder="请输入书名"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="作者" prop="region">
                <el-col :span="20">
                    <el-input v-model="bookForm.author" placeholder="请输入作者"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item v-show="operateType === 'edit'" label="图片展示：" prop="region" class="msTop">
                <img class="imgSize" :src="bookForm.picture">
            </el-form-item>
            <el-form-item :label="operateType === 'edit' ? '修改文章图片：': '上传文章图片'" class="msTop">
                <el-upload
                        class="upload-demo"
                        action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
                        ref="newsUpload"
                        :on-change="handleFileChange"
                        :file-list="bookFileList"
                        :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
                    <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
            </el-form-item>
            <el-form-item label="出版社" prop="region">
                <el-col :span="20">
                    <el-input v-model="bookForm.publisher" placeholder="请输入出版社"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="出版日期">
                <el-col :span="8">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择出版日期" v-model="bookForm.publishdate" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="简介" prop="region">
                <el-col :span="20">
                    <el-input v-model="bookForm.introduction" type="textarea" placeholder="请输入简介"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="bookForm.flag">
                    <el-radio :label="'0'" selected>是</el-radio>
                    <el-radio :label="'1'">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addSubmit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { addBook,updateBook,uploadFile } from '@/api/paperManage'
    export default {
        name: "AddBook",
        props: {
            operateType: {
                type: String,
                default: () => 'add'
            },
            bookInfo: {
                type: Object,
                default: () => {
                    return {
                        bookid: '',
                        bookname: '',
                        author: '',
                        picture: '',
                        publisher: '',
                        publishdate: '',
                        introduction: '',
                        flag: '',
                    }
                }
            }
        },
        watch: {
            bookInfo: {
                handler(newVal, objVal) {
                    if(newVal !== objVal){
                        this.bookForm = newVal
                    }
                },
            }
        },
        data(){
            return{
                loading: false,
                fileLoading: false,
                successImagUrl: '',
                bookForm: this.bookInfo,
                bookFileList: [],
            }
        },
        methods:{
            async addSubmit(){
                if(this.operateType === 'add'){
                    try {
                        this.bookForm.picture = this.successImagUrl
                        this.loading = true
                        await addBook(this.bookForm)
                        this.$message({
                            type: 'success',
                            message: '成功'
                        })
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log( new Error(e))
                    }
                    this.loading = false
                } else {
                    try {
                        this.bookForm.picture = this.successImagUrl ? this.successImagUrl : this.bookForm.picture
                        this.bookForm.eventid = this.bookInfo.bookid
                        this.loading = true
                        await updateBook(this.bookForm)
                        this.$message({
                            type: 'success',
                            message: '成功'
                        })
                        this.$emit('updateTable')
                    } catch (e) {
                        console.log( new Error(e))
                    }
                    this.loading = false
                }
            },
            handleFileChange(file, FileList){
                this.bookFileList = FileList
            },
            async submitUpload(){
                let formData = new FormData()
                formData.append('file', this.bookFileList[0].raw)
                // this.newsFileList.forEach(function (file) {
                //   formData.append("file", file.raw, file.name);
                // })
                this.fileLoading = true
                const res = await uploadFile(formData)
                this.successImagUrl = res.message
                this.$message({
                    type: 'success',
                    message: '上传成功'
                })
                this.fileLoading = false
            },
        },
        computed: {},
        components: {}
    }
</script>

<style lang="scss" scoped>
    .addBook{
        .msTop{
            .imgSize{
                width: 50px;
                height: 50px;
            }
        }
        /deep/ .el-form-item {
            margin-bottom: 15px;
        }
        /deep/ .el-form-item__label {
            font-size: 14px;
        }
        /deep/ .el-input__inner, .el-textarea__inner, .textarea__inner {
            font-size: 12px;
        }
    }

</style>